import { defaultTheme } from '@vuepress/theme-default'
import { searchPlugin } from '@vuepress/plugin-search'

module.exports = {
  // 网站的一些基本配置
  // base:配置部署站点的基础路径
  title: '荒の笔记', // 网站的标题
  description: '风吹哪页读哪页，花开何时看何时', // 网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中。
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }] // 需要被注入到当前页面的 HTML <head> 中的标签
  ],
  // host port在本地运行就不配置了
  theme: defaultTheme({
    logo: '/logo.png',
    colorMode: 'light',
    navbar: [
      // 直接跳转，'/'为不添加路由，跳转至首页，以/结尾的最终对应的都是/index.html,也就是README.md文件编译后的页面
      { text: 'Home', link: '/' },
      // 对应blog/fontend/README.md
      { text: 'JsApi', link: '/blog/JsApi/' },
      { text: 'css动画', link: '/blog/Animation/transition' },
      // 对应/guide/guide.md
      { text: 'Js', link: '/blog/Js/' },
      { text: 'Flutter', link: '/blog/Flutter/Started' },
      { text: '面试', link: '/blog/Interview/css' },
      // 不指定深度，默认深度1-提取h2 最大深度-2，同一标题下最多提取到h3，想要改变深度可以指定sidebarDepth
    ],
    // 内置搜索
    search: true,
    searchMaxSuggestions: 10,
    // 显示所有页面的标题链接
    displayAllHeaders: true,
    // 禁用导航栏
    // navbar: false,
    // 设置自动生成侧边栏
    sidebar: {
      '/blog/JsApi/': [
        '',
        'array',
        'string',
        'es6'
      ],
      '/blog/Animation/': [
        'transition',
        'transform',
        'animation',
        'whiteSpace'
      ],
      '/blog/Js/': [
        ''
      ],
      '/blog/Flutter/': [
        'Started',
        'lifecycle',
        'components',
        'router',
        'key',
        'animation'
      ],
      '/blog/Interview/': [
        'css',
        'JavaScript',
        'WEB',
        'VUE'
      ]
    },
    sidebarDepth: 3,
  }),
  markdown: {
    // 是否在每个代码块的左侧显示行号
    lineNumbers: true,
  },
  plugins: [
    searchPlugin({
      locales: {
        '/zh/': {
          placeholder: '搜索',
        },
      },
      getExtraFields: (page) => page.frontmatter.tags ?? [],
    }),
  ],
}